<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户资料填写(林永洋)</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
            background-color: #f5f5f5;
            padding: 20px;
        }

        .container {
            max-width: 500px;
            margin: 0 auto;
        }

        .form-title {
            text-align: center;
            color: #333;
            margin-bottom: 30px;
            font-size: 24px;
        }

        .form-group {
            margin-bottom: 20px;
        }

        label {
            display: block;
            margin-bottom: 8px;
            color: #666;
            font-size: 14px;
        }

        input {
            width: 100%;
            padding: 12px;
            border: 1px solid #ddd;
            border-radius: 6px;
            font-size: 16px;
            transition: border-color 0.3s;
        }

        input:focus {
            border-color: #007bff;
            outline: none;
        }

        .submit-btn {
            width: 100%;
            padding: 14px;
            background-color: #007bff;
            color: white;
            border: none;
            border-radius: 6px;
            font-size: 16px;
            cursor: pointer;
            transition: background-color 0.3s;
        }

        .submit-btn:hover {
            background-color: #0056b3;
        }

        .error-msg {
            color: #dc3545;
            font-size: 12px;
            margin-top: 4px;
            display: none;
        }

        @media (max-width: 480px) {
            body {
                padding: 15px;
            }
            
            input {
                padding: 10px;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <h1 class="form-title">用户资料填写</h1>
        <form id="userForm">
            <div class="form-group">
                <label for="name">姓名：</label>
                <input type="text" id="name" name="name" placeholder="请输入真实姓名" required>
                <div class="error-msg" id="nameError"></div>
            </div>

            <div class="form-group">
                <label for="phone">手机号：</label>
                <input type="tel" id="phone" name="phone" placeholder="请输入11位手机号" pattern="\d{11}" required>
                <div class="error-msg" id="phoneError"></div>
            </div>

            <div class="form-group">
                <label for="idCard">身份证号：</label>
                <input type="text" id="idCard" name="idCard" placeholder="请输入18位身份证号" pattern="\d{17}[\dXx]" required>
                <div class="error-msg" id="idCardError"></div>
            </div>

            <div class="form-group">
                <label for="address">联系地址：</label>
                <input type="text" id="address" name="address" placeholder="请输入详细地址" required>
                <div class="error-msg" id="addressError"></div>
            </div>

            <button type="submit" class="submit-btn">提交资料</button>
        </form>
    </div>

    <script>
        const form = document.getElementById('userForm');
        const errorMessages = {
            name: '请输入有效姓名',
            phone: '请输入有效的11位手机号',
            idCard: '请输入有效的18位身份证号',
            address: '请输入有效地址'
        };

        form.addEventListener('submit', function(e) {
            e.preventDefault();
            let isValid = true;

            // 验证姓名（至少2个中文字符）
            const nameInput = document.getElementById('name');
            if (!/^[\u4e00-\u9fa5]{2,}$/.test(nameInput.value.trim())) {
                showError('nameError', errorMessages.name);
                isValid = false;
            }

            // 验证手机号
            const phoneInput = document.getElementById('phone');
            if (!/^1[3-9]\d{9}$/.test(phoneInput.value.trim())) {
                showError('phoneError', errorMessages.phone);
                isValid = false;
            }

            // 验证身份证号
            const idCardInput = document.getElementById('idCard');
            if (!/^\d{17}[\dXx]$/.test(idCardInput.value.trim())) {
                showError('idCardError', errorMessages.idCard);
                isValid = false;
            }

            // 验证地址（至少5个字符）
            const addressInput = document.getElementById('address');
            if (addressInput.value.trim().length < 5) {
                showError('addressError', errorMessages.address);
                isValid = false;
            }

            if (isValid) {
                // 这里可以添加提交表单的代码
                alert('资料提交成功！');
                form.reset();
            }
        });

        function showError(elementId, message) {
            const errorElement = document.getElementById(elementId);
            errorElement.textContent = message;
            errorElement.style.display = 'block';
        }

        // 输入时清除错误提示
        document.querySelectorAll('input').forEach(input => {
            input.addEventListener('input', () => {
                document.getElementById(input.id + 'Error').style.display = 'none';
            });
        });
    </script>
</body>
</html>